<!--
 * 图片组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用" desc="默认宽高为 160px">
            <pure-image class="image" src="/static/1.png"></pure-image>
        </app-demo-module>

        <!-- 占位图（小图） -->
        <app-demo-module title="占位图（小图）">
            <pure-image class="image" placeholderSrc="/static/2.png"></pure-image>
        </app-demo-module>

        <!-- 加载中 -->
        <app-demo-module title="加载中">
            <pure-image class="image" src="/static/1.png" ref="imageRef1" @load="onLoad" @error="onError"></pure-image>
            <app-gap inline size="10px"></app-gap>
            <pure-image class="image" src="/static/1.png" ref="imageRef2" @load="onLoad" @error="onError" loadingText="加载中..."></pure-image>
            <app-gap size="10px"></app-gap>
            <pure-image class="image" src="/static/1.png" ref="imageRef3" @load="onLoad" @error="onError" loadingText="加载中..." spin loadingIconName="__loading"></pure-image>
        </app-demo-module>

        <!-- 加载失败 -->
        <app-demo-module title="加载失败">
            <pure-image class="image" src="/static/__1.png"></pure-image>
            <app-gap inline size="10px"></app-gap>
            <pure-image class="image" src="/static/__1.png" errorText="加载失败"></pure-image>
        </app-demo-module>

        <!-- 圆形图片 -->
        <app-demo-module title="圆形图片">
            <pure-image class="image" src="/static/1.png" circle></pure-image>
        </app-demo-module>

        <!-- 点击预览 -->
        <app-demo-module title="点击预览">
            <pure-image class="image" src="/static/1.png" preview></pure-image>
        </app-demo-module>

        <!-- 自定义大小 -->
        <app-demo-module title="自定义大小">
            <pure-image class="image" src="/static/1.png" width="100px" height="100px"></pure-image>
            <app-gap size="10px"></app-gap>
            <pure-image class="image" src="/static/1.png" width="150px" height="150px"></pure-image>
            <app-gap size="10px"></app-gap>
            <pure-image class="image" src="/static/1.png" width="200px" height="200px"></pure-image>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // Refs
    const imageRef1 = ref(null);
    const imageRef2 = ref(null);
    const imageRef3 = ref(null);

    // 加载成功
    function onLoad() {
        imageRef1.value._setLoading();
        imageRef2.value._setLoading();
        imageRef3.value._setLoading();
    }

    //  加载失败
    function onError() {
        imageRef1.value._setError();
        imageRef2.value._setError();
        imageRef3.value._setError();
    }
</script>

<style scoped lang="scss">
    .image {
        background: #f8f8f8;
    }
</style>
